@import "lib/styles/variable.scss";

.yui-popover {
  // position: relative;
  display: inline-block;
  &-wrap {
    position: absolute;
    max-width: 20em;
    padding: 12px;
    color: $B800;
    background: #fff;
    border-radius: $radius;
    word-break: break-all; // 单词换行
    .yui-popover-header {
      margin-bottom: 8px;
      font-weight: $font-weight;
      font-size: $font-size-lg;
    }
    .yui-popover-content {
      font-size: $font-size-default;
    }

    // 三角形
    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border: 6px solid transparent;
    }

    &.yui-popover-top {
      margin-top: -6px;
      transform: translateY(-100%);
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.06),
        0 8px 8px 0 rgba(0, 0, 0, 0.12);
      &::after {
        bottom: -6px;
        left: 12px;
        border-top: 6px solid #fff;
        border-bottom: none;
      }
    }

    &.yui-popover-right {
      margin-left: 6px;
      box-shadow: 8px 0 16px 8px rgba(0, 0, 0, 0.06),
        -8px 0 8px 0 rgba(0, 0, 0, 0.12);
      &::after {
        top: 50%;
        left: -6px;
        transform: translateY(-50%);
        border-right: 6px solid #fff;
        border-left: none;
      }
    }

    &.yui-popover-bottom {
      margin-top: 6px;
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.06),
        0 -8px 8px 0 rgba(0, 0, 0, 0.12);
      &::after {
        top: -6px;
        left: 12px;
        border-bottom: 6px solid #fff;
        border-top: none;
      }
    }

    &.yui-popover-left {
      margin-left: -6px;
      transform: translateX(-100%);
      box-shadow: 8px 0 16px 8px rgba(0, 0, 0, 0.06),
        8px 0 8px 0 rgba(0, 0, 0, 0.12);
      &::after {
        top: 50%;
        right: -6px;
        transform: translateY(-50%);
        border-left: 6px solid #fff;
        border-right: none;
      }
    }
  }
  &-triggerWrap {
    display: inline-block;
  }
}
